<template>
    <div class="flyDuck-app-home-main-page">
        <!--搜索区域-->
        <div class="flyDuck-app-home-main-page-query">
            <el-form ref="queryForm" :model="queryParam" :inline="true">
                <el-form-item label="字典名称" prop="dictName">
                    <el-input v-model="queryParam.dictName" size="small" @keydown.enter.native="getDictTypeTableData"  placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="getDictTypeTableData" icon="el-icon-search">搜索</el-button>
                    <el-button size="mini" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--按钮区域-->
        <div class="flyDuck-app-home-main-page-button">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="openAddDialog" v-has="'/system/sysDictTypeController/addDictType'">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <!--表格区域-->
        <div class="flyDuck-app-home-main-page-table">
            <el-table :data="dictTypeTableData"  size="mini" height="400px" >
                <el-table-column align="center" label="序号" type="index" width="70">
                    <template slot-scope="scope">
                        <span>{{ (page - 1) * size + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="dictName" label="字典名称"></el-table-column>
                <el-table-column align="center" prop="dictKey" label="字典键值"></el-table-column>
                <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="openUpdateDialog(scope.row)" v-has="'/system/sysDictTypeController/updateDictType'">编辑</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteDictType(scope.row)" v-has="'/system/sysDictTypeController/deleteDictType'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页区域-->
        <div class="flyDuck-app-home-main-page-pagination">
            <el-pagination @current-change="currentChange" @size-change="sizeChange" background layout='sizes, prev, pager, next, jumper, ->, total' :total="total"></el-pagination>
        </div>
        <!--弹窗-->
        <div class="flyDuck-app-home-main-page-dialog">
            <el-dialog :title="title" :visible.sync="dialogVisible">
                <el-form ref="dictTypeForm" :rules="rules" :model="dictTypeForm"  :validate-on-rule-change="false" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="字典名称" prop="dictName">
                                <el-input v-model="dictTypeForm.dictName" placeholder="请输入字典名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="字典键值" prop="dictKey">
                                <el-input v-model="dictTypeForm.dictKey" placeholder="请输入字典键值"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="状态" prop="status">
                                <el-switch style="margin-top: 10px" v-model="dictTypeForm.status" active-value="1" inactive-value="2" active-color="#13ce66" ></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table :data="dictTypeForm.dictDataList" style="width: 100%">
                    <el-table-column prop="dictLabel" label="字典标签">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.dictLabel" placeholder="请输入字典标签"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dictValue" label="字典值">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.dictValue" placeholder="请输入字典值"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" label="显示顺序">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.sort" :min="1"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="deleteRow(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addRow">新增字典数据</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import {getDictTypePageList,getDictTypeDetail,addDictType,updateDictType,deleteDictType,getDictOptionList} from '@/api/system/dict'
    export default {
        name: "SysDictType",
        data() {
            return {
                /*搜索区域*/
                queryParam:{
                    dictName:'',
                },
                /*按钮区域*/
                /*表格区域*/
                statusOptions:[],
                dictTypeTableData:[],
                /*分页区域*/
                total:0,
                page:1,
                size:10,
                /*弹窗区域*/
                dialogVisible:false,
                title:'',
                dictTypeForm:{
                    id:null,
                    dictName:'',
                    dictKey:'',
                    status:'1',
                    dictDataList:[],

                },
                rules:{
                    dictName:[{required:true, message:'请输入字典名称', trigger:'blur'}],
                    dictKey:[{required:true, message:'请输入字典键值', trigger:'blur'}],
                },
            };
        },
        mounted() {
            this.getDictTypeTableData();
            this.getStatusOptions();
        },
        methods: {
            /*搜索区域*/
            /*按钮区域*/
            openAddDialog(){
                this.title = '添加字典类型';
                this.resetDictTypeForm();
                this.dialogVisible = true;
            },
            resetDictTypeForm(){
                this.dictTypeForm = {
                    id:null,
                    dictName:'',
                    dictKey:'',
                    status:'1',
                    dictDataList:[],
                };
            },
            openUpdateDialog(data){
                this.title = '编辑字典类型';
                //回显
                getDictTypeDetail(data.id).then(data => {
                    this.dictTypeForm = data;
                    console.log(this.dictTypeForm)
                })
                this.dialogVisible = true;
            },
            resetQuery(){
                debugger
                this.queryParam.dictName = '';
                this.page = 1;
                this.getDictTypeTableData();
            },
            /*表格区域*/
            getStatusOptions(){
                getDictOptionList(`status`).then(data => {
                    this.statusOptions = data;
                })
            },
            statusFormatter(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            getDictTypeTableData(){
                getDictTypePageList(this.queryParam,this.page,this.size).then(data=>{
                    this.dictTypeTableData = data.rows;
                    this.total = data.total;
                })
            },
            deleteDictType(data){
                this.$confirm(`是否删除${data.dictName}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDictType(data.id).then(data=>{
                        if(data){
                            this.getDictTypeTableData();
                        }
                    })
                })
            },
            /*分页区域*/
            currentChange(currentPage){
                this.page = currentPage;
                this.getDictTypeTableData();
            },
            sizeChange(size){
                this.size = size;
                this.getDictTypeTableData();
            },
            /*弹窗区域*/
            addRow(){
                this.dictTypeForm.dictDataList.push({})
            },
            deleteRow(index){
                this.dictTypeForm.dictDataList.splice(index,1)
            },
            submitForm(){
                if(this.dictTypeForm.id){
                    //修改
                    this.$refs['dictTypeForm'].validate(valid=>{
                        if(valid){
                            updateDictType(this.dictTypeForm).then(data => {
                                if(data){
                                    this.dialogVisible = false;
                                    this.getDictTypeTableData();
                                }
                            })
                        }
                    })
                }else {
                    //添加
                    this.$refs['dictTypeForm'].validate(valid=>{
                        if(valid){
                            addDictType(this.dictTypeForm).then(data => {
                                if(data){
                                    this.dialogVisible = false;
                                    this.getDictTypeTableData();
                                }
                            })
                        }
                    })
                }


            },
        },
    }
</script>
<style>
</style>

